<template>
  <el-row :gutter="15" class="vector3">
    <el-col :span="8">
      <el-input-number
        v-model="vector.x"
        :precision="3"
        controls-position="right"
      ></el-input-number>
    </el-col>
    <el-col :span="8">
      <el-input-number
        v-model="vector.z"
        :precision="3"
        controls-position="right"
      ></el-input-number>
    </el-col>
    <el-col :span="8">
      <el-input-number
        v-model="vector.y"
        :precision="3"
        controls-position="right"
      ></el-input-number>
    </el-col>
  </el-row>
</template>
<script setup lang="ts">
import { Euler, Vector3 } from 'three'
import { computed, type PropType } from 'vue'
const props = defineProps({
  modelValue: {
    type: Object as PropType<Vector3 | Euler>,
    required: true
  }
})

const emit = defineEmits({
  'update:modelValue': (val: Vector3 | Euler) => val
})

const vector = computed({
  get: () => props.modelValue,
  set: (val) => {
    emit('update:modelValue', val)
  }
})
</script>
<style lang="scss" scoped>
.vector3 {
  margin-top: 0 !important;

  ::v-deep(.el-input-number.is-controls-right) {
    width: 70px;

    .el-input__wrapper {
      padding-left: 5px;
      padding-right: 30px;
    }
  }
}
</style>
